<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>底部导航菜单切换</title>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<style>
			select{ margin: 0px !important; padding:4px !important;}
			.text-left{ width:50%; float:left;}
			.mui-table-view{font-size:14px;}
			.search-tj{ margin-top:10px; width:100%; float: left;}
			.search-tj span{ width:25%; float: left; line-height: 35px; text-align: center;}
			.button{ width: 80%; margin-left: 10%; margin-top: 10px;}
			option{margin: 0; padding: 0;}
			input{ margin: 0 !important; padding:0 !important;}
			.ui-alert{ width: 50%; line-height:32px;}
			.btn{ margin:0; padding:0;}
			input{border-radius:5px; border:1px solid #D1D1D1; margin-left:5px; text-indent:0.5rem; font-size: 15px;}
			input{border-width:0; text-align: left; font-size:14px;}
			.bottom_soild{border-bottom: 1px solid #DDDDDD;}
			/*列表样式*/
			.pat_class{ float:left;}
			.pat_class img{ float: left; width: 25%;}
			.mui-media-body{ float: left; width: 70%; margin-left:5%;}
			.mui-media-body-l{ float: left; width: 100%;}
			.mui-media-body-l span{ float: left; margin-right: 10px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">高级查询</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" style="margin-top: 5px;">
				<div class="mui-row">
					<div class="mui-col-sm-12 mui-col-xs-12">
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; line-height: 30px; color: #000000;">确诊时间</div>
								<input  id='result0' class="ui-alert"  placeholder="随访日期" style="width:50%; height: 32px; text-align: right; line-height: 32px; float:right; margin-right:15px !important;"/>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a data-options='{"type":"date"}' class="btn mui-navigate-right">
								<div style="float: left; line-height: 30px; color: #000000;">确诊时间</div>
								<input  id='result1' class="ui-alert"  placeholder="随访日期" style="width:50%; height: 32px; text-align: right; line-height: 32px; float:right; margin-right:15px !important;"/>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<span>随访分类</span>
							<select  id="sel-id" style=" width:25%; padding:4px; margin: 0; float: right;">
							  <option value ="">请选择</option>
							  <option value ="1">高血压随访</option>
							  <option value ="2">糖尿病随访</option>
							  <option value="3">肺结核随访</option>
							</select>
						</li>
						<li class="mui-table-view-cell">
							<select style=" width:30%; text-align: left; padding:0px; margin: 0;">
							  <option value ="1">身份证</option>
							  <option value ="2">其他证件</option>
							  <option value="3">军官证</option>
							</select>
							<input type="text" id="card" style="width:70%; border-bottom: 1px solid #CCCCCC !important; border:none; margin-left:5px; height: 33px; line-height: 33px; float: right;" placeholder="输入身份证">
						</li>
						<li class="mui-table-view-cell">
							<span>姓名</span>
							<input type="text" id="name" style="width:70%; border-bottom: 1px solid #CCCCCC !important; border:none;  margin-left:5px; height: 33px; line-height: 33px; float: right;" placeholder="姓名">
						</li>
					</div>
				</div>
			</ul>	
			<button class="button" onclick="search()">查询</button>
			<div style="height:10px; background:#efeff4;"></div>
			<ul class="mui-table-view" id="follow_qy_ul">
						
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/jquery.min-1.11.1.js"></script>
		<script type="text/javascript" charset="utf-8">
			var rows ="";
			//选择项
			var opt = $("#sel-id option:selected");
			$("#sel-id").change(function(val) {
				opt = $("#sel-id option:selected");
			});
			//跳转
			function openurl(symname,visitId,i){
				var arry =["高血压","糖尿病","肺结核"]
				console.log(arry[opt.val()-1],visitId,JSON.stringify(rows[i]))
				mui.openWindow({
					url: 'follow_up_add.html', 
					id:'follow_up_add',
					extras:{
						symname:arry[opt.val()-1],
						data:JSON.stringify(rows[i]),
						visitId:visitId
					}
				});
			}
			//查询事件
			function search(){
				$("#follow_qy_ul").html("");
				var listcont ="";
				//时间
				var confirmed = $("#result0").val();
				var confirmed2 = $("#result1").val();
				//身份证
				var card = $("#card").val();
				//姓名
				var name = $("#name").val();
				//判断条件
				if(confirmed ==""){
					alert("开始时间不能为空")
				}
				else if(confirmed2 ==""){
					alert("结束时间不能为空")
				}
				else if(opt.val() == ""){
					alert("分类不能为空")
				}
				else if(name == ""){
					alert("姓名不能为空")
				}else{
				//查询
					$.ajax('http://192.168.2.64:8089/mobile/IntegratedQuery/getVisitRecord ',{
						data:{
							queryType:opt.val(),
							beginDate:confirmed,
							endDate:confirmed2,
							idCard:card,
							patientName:name
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						success:function(data){
							console.log(data)
							rows = data["rows"]
							if(data.status==1){
								var date0 = new Date(data["rows"][0].birthday)
								var date1 = new Date();
								var year0 = date0.getFullYear();
								var year1 = date1.getFullYear();
								var age = year1 - year0;
								var vistdata = new Date(data["rows"][0].visitDate)
								var visi = vistdata.getFullYear()+'-'+vistdata.getMonth()+1 +'-'+vistdata.getDate();
								var arry = ['门诊','家庭','电话']
								var arry_way = arry[data["rows"][0].visitWay]
								for(var i=0; i<data["rows"].length; i++){
											listcont += '<li class="mui-table-view-cell mui-media">'
											+'<a class="pat_class" onclick="openurl('+data["rows"][i].visitWay+','+data["rows"][i].visitId+','+i+')">'
											+'<img id="Pat_img'+i+'" class="mui-pull-left" src="../images/Patient-m.png">'
											+'<div class="mui-media-body">'
											+'<div class="mui-media-body-l"><span>'+data["rows"][i].name+'</span><span>性别:'+data["rows"][i].sex+'</span><span>年龄:'+age+'</span></div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访医生:'+data["rows"][i].doctorName+'</span></div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访方式:</span>'+arry_way+'</div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访日期:'+visi+'</span></div>'
											+'</div>'
											+'</a>'
											+'</li>';	
								}
							}else{
								alert(data.message);
							}
							$("#follow_qy_ul").append(listcont)
							for(var j=0; j<data["rows"].length; j++){
								//头像性别
								if(data["rows"][j].sex == "女"){
									$("#Pat_img"+j).attr("src", "../images/Patient-w.png");
								}else{
									$("#Pat_img"+j).attr("src", "../images/Patient-m.png");
								}
							}
						},
						error:function(xhr,type,errorThrown){
							
						}
					});	
				}
			}
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								$('#result'+i)[0].value = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								//判断开始时间和结束时间
								if ($('#result0')[0].value > $('#result1')[0].value && $('#result1')[0].value != "") {
									alert("结束时间必须大于之前")
									$('#result' + i)[0].value = ""
								}
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui);
		</script>
	</body>
</html>
